<script setup>
  import EditorJS from '@editorjs/editorjs';
  import Header from '@editorjs/header';
  import LinkTool from '@editorjs/link';
  import Checklist from '@editorjs/checklist';
  import CodeTool from '@editorjs/code';
  import Table from '@editorjs/table';
  import Warning from '@editorjs/warning';

  const editor = new EditorJS({
    tools: {
      header: Header,
      linkTool: {
        class: LinkTool,
        config: {
          endpoint: '',
        }
      },
      checklist: {
        class: Checklist,
        inlineToolbar: true,
      },
      code: CodeTool,
      table: Table,
      warning: Warning,
    },
    autofocus: true,
    data: {},
    onChange: (api, event) => {
      editor.save().then((outputData) => {
        console.log('Article data: ', outputData)
      }).catch((error) => {
        console.log('Saving failed: ', error)
      });
    }
  })

</script>

<template>
  <h4></h4>
  <div id="editorjs" style="width: 1000px;" ></div>
</template>

<style scoped>

</style>